<template>
  <div id="main">
    <div id="search-div">
      <el-row class="query-row">
        <el-col :span="3.5" class="query-row-col">
          <div class="query-row-col-title">省份</div>
          <el-select v-model="queryParams.province" placeholder="请选择" @change="onProvinceChange" clearable>
            <el-option v-for="province in provinces" :key="province" :label="province" :value="province" />
          </el-select>
        </el-col>
        <el-col :span="3.5" class="query-row-col">
          <div class="query-row-col-title">市</div>
          <el-select v-model="queryParams.city" placeholder="请选择" @change="onCityChange" clearable>
            <el-option v-for="city in citys" :key="city" :label="city" :value="city" />
          </el-select>
        </el-col>
        <el-col :span="3.5" class="query-row-col">
          <div class="query-row-col-title">区/县</div>
          <el-select v-model="queryParams.area" placeholder="请选择" @change="onAreaChange" clearable>
            <el-option v-for="area in areas" :key="area" :label="area" :value="area" />
          </el-select>
        </el-col>
        <el-col :span="3.5" class="query-row-col">
          <div class="query-row-col-title">街道/镇</div>
          <el-select v-model="queryParams.street" placeholder="请选择" clearable >
            <el-option v-for="street in streets" :key="street" :label="street" :value="street" />
          </el-select>
        </el-col>

      </el-row>
      <el-row class="query-row">
        <el-col :span="3.5" class="query-row-col">
          <div class="query-row-col-title">信息状态</div>
          <el-select v-model="queryParams.pushState" placeholder="请选择" clearable>
            <el-option v-for="item in pushStateList" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="3.5" class="query-row-col">
          <div class="query-row-col-title">标签</div>
          <el-input v-model="queryParams.label" placeholder="请输入内容" clearable></el-input>
        </el-col>

        <el-col :span="4" class="query-row-col">
          <el-button type="primary" @click="query" icon="el-icon-search" class="query-row-col-search" />
        </el-col>
      </el-row>
    </div>
    <div id="button-div">
      <el-row class="button-row">
        <el-col :span="4" class="button-row-col">
          <el-button type="primary" @click="exportExcel" class="button-row-col-button" plain>导出</el-button>
        </el-col>
      </el-row>
    </div>
    <div id="table-div">
      <el-table :data="tableData" class="table-table" border stripe>
        <el-table-column type="index" align="center" width="70" label="序号"></el-table-column>
        <el-table-column prop="address" align="center" label="地址信息" width="180" show-overflow-tooltip></el-table-column>
        <el-table-column prop="parkingName" align="center" label="车场名称" width="180" show-overflow-tooltip></el-table-column>
        <el-table-column prop="contacts" align="center" label="发布人姓名" width="180" show-overflow-tooltip></el-table-column>
        <el-table-column prop="contactNumber" align="center" label="发布人手机号" width="180" show-overflow-tooltip></el-table-column>
        <el-table-column prop="rentScope" align="center" label="价格范围" width="180" show-overflow-tooltip></el-table-column>
        <el-table-column prop="pushState" align="center" label="消息状态" width="180" show-overflow-tooltip>
          <template slot-scope="scope">
            <span v-if="scope.row.pushState == 0">发布中</span>
            <span v-if="scope.row.pushState == 1">已下架</span>
            <span v-if="scope.row.pushState == 2">强制下架</span>
            <span v-if="scope.row.pushState == 3">过期发布</span>
          </template>
        </el-table-column>
        <el-table-column prop="isPrivacy" align="center" label="隐私保护" width="180" show-overflow-tooltip>
          <template slot-scope="scope">
            <span v-if="scope.row.isPrivacy == 0">未开启</span>
            <span v-if="scope.row.isPrivacy == 1">开启</span>
          </template>
        </el-table-column>
        <el-table-column prop="label" align="center" label="标签" width="180" show-overflow-tooltip :formatter="formatLabel"></el-table-column>
        <el-table-column prop="clickCount" align="center" label="点击次数" width="180" show-overflow-tooltip></el-table-column>
        <el-table-column prop="pushTime" align="center" label="发布时间" width="180" show-overflow-tooltip :formatter="formatPushTime"></el-table-column>
        <el-table-column prop="overTime" align="center" label="剩余时间" width="180" show-overflow-tooltip></el-table-column>
        <el-table-column prop="description" align="center" label="详细描述" min-width="220" show-overflow-tooltip></el-table-column>
        <el-table-column label="操作" min-width="220" fixed="right">
          <template slot-scope="scope">
            <el-button size="mini" type="primary" @click="openAddLabel(scope.row.label, scope.row.srId)">添加标签</el-button>
            <el-button class="while-button" size="mini" type="primary" plain @click="forciblyUp(scope.row.srId)" :disabled="scope.row.pushState == 1 || scope.row.pushState == 2">强制下架</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div id="page-div">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                     :page-sizes="pageSizesList" :current-page.sync="pageNum" :page-size="pageSize"
                     layout="total, sizes, prev, pager, next, jumper" :total="totalDataNumber">
      </el-pagination>
    </div>

    <basic-modal ref="labelModal"  width="500px" customeClass="remaining-modal">
      <h3 slot="title" style="text-align: center">添加标签</h3>
      <div style="margin: 20px;"></div>
      <div class="modal-body form-horizontal" slot="modal-body" style="min-width: 500px">
        <div style="max-width: 500px;">
          <el-tag size="medium" v-for="(label,key) in labels" closable style="margin-left: 10px;margin-top: 5px" @close="tagClose(label)">{{label}}</el-tag>
        </div>
        <div style="width: 100%;margin-top: 15px;padding-left: 10px;padding-right: 10px;">
          <el-input type="textarea" maxlength="10" :rows="5" placeholder="请输入标签内容..." v-model="label" />
        </div>
      </div>
      <div class="modal-footer" slot="modal-footer">
        <button class="ake_btn ake_btn_text modal-close none" @click="closed('labelModal')">取消</button>
        <button class="ake_btn ake_btn_blue modal-close" @click="addLabel()">确定</button>
      </div>
    </basic-modal>
  </div>
</template>

<script>
  import BasicModal from '../../../components/widgets/BasicModal';
  import common from '../../../mixins/common.js';
  import crypto from '../../../mixins/crypto.js';
  import invokeModal from '../../../mixins/modal/invokeModal.js';
  import getSearchOptions from '../../../mixins/list/getCommonTypes.js';
  import {count, deepCopyObj} from '../../../assets/js/help.js';
  import list from './js/list.js'

  export default {
    mixins: [common, crypto, invokeModal, getSearchOptions, list],
    components: {
      'basic-modal': BasicModal
    }
  }
</script>

<style scoped>
  @import '../../../assets/less/list.less';

  .while-button {
    background-color: #ffffff;
  }

  .while-button:hover {
    background-color: #409EFF;
    color: #ffffff;
  }
</style>
